<template>
  <div id="container">
    <ul>
      <li>
        <h4>平台总运载量(吨)</h4>
        <count-to  :endVal=num1 :decimals="2" class="num" :duration="4000" separator=","></count-to >
      </li>
      <li>
        <h4>平台总运费金额(元)</h4>
        <count-to  :endVal=num2 :decimals="2" class="num" :duration="4000" separator=","></count-to >
      </li>
      <li>
        <h4>平台司机用户数(人)</h4>
        <count-to :endVal=count1 :decimals="0" class="num" :duration="4000" separator=","></count-to>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import { CountTo } from 'vue3-count-to';
import { getBaseCnt } from "@/common/api";

let num1 = ref<number>();
let num2 = ref<number>();
let count1 = ref<number>();

getBaseCnt().then(res => {
  num1.value = res.data.sum1;
  num2.value = res.data.sum2;
  count1.value = res.data.count1 + 2800;
});

</script>

<style scoped>
#container {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  ul {
    width: 100%;
    height: 100%;
    display: flex;
    list-style: none;
    align-items: center;
    flex-direction: column;

    li {
      flex: 4;
      width: 100%;
      display: flex;
      text-align: left;
      padding-left:160px;
      flex-direction: column;
      justify-content: center;

      h4 {
        color: #a3bef1;
        font-weight: 400;
        font-size: 14px;
      }

      .num {
        color: #a3bef1;
        font-size:32px;
        font-family: 'LED',serif;
        letter-spacing: 5px;

      }
    }
  }
}
</style>
